<template>
	<view>
		<uni-nav-bar left-img="back" title="顾客档案">
			<template slot="right">
				<navigator url="../skin/guest-search" Data-btnname="搜索" Data-code="搜索内容">
					<image src="../../static/search.png" style="height:18px;margin-top:13px;" mode="heightFix"></image>
				</navigator>
			</template>
		</uni-nav-bar>
		<view class="guest">
			<navbar-list :url="listUrl" ref="navbar">
				<template slot="header">
					<view class="search weui-flex">
						<view style="padding-right:30upx;" @click="switchType('all')" Data-btnname="全部">
							<view class="border" :class="search.type=='all' ? 'select-a':''">全部</view>
						</view>
						<view class="weui-flex__item" @click="switchType('date')" Data-btnname="按日期筛选">
							<view class="border weui-img-text" :class="search.type=='date' ? 'select-a':''">
								<image src="../../static/calendar@2x.png" style="height:16px;" mode="heightFix"></image>
								<text v-if="search.startDate==''">请选择日期</text>
								<text v-else>{{search.startDate}}-{{search.endDate}}</text>
							</view>
						</view>
					</view>
				</template>
				<template slot="list" scope="{tabItem}">
					<view v-for="(item,index) in tabItem.data" :key="index" class="weui-margin-full" style="margin-top: 10px;">
						<view class="display-flex-between" style="padding:40upx 0px 20upx 0px;">
							<view class="date" style="font-weight: bold;font-size:16px;">{{item.createDate.replace("-",'/').replace("-",'/') + ' ' + item.createWeek}}</view>
							<view class="num" style="color:#999999;font-size: 12px;font-weight: 400;">{{item.numberPeople}} 人</view>
						</view>
						<view class="weui-flex list-item"
							v-for="(item, index1) in item.customers" :key="index1" @click="handleNav(item.id)">
							<view class="weui-flex__item display-flex">
								<text style="padding-right:15px;color: #333333;">{{item.nickName}}</text>
								<!-- <text class="tag">来店{{item.storeCount}}次</text> -->
							</view>
							<view style="">{{item.tell}}</view>
						</view>
					</view>

				</template>
			</navbar-list>
		</view>

		<!-- 展示日历结束 -->
		<beauty-calendar ref="calendar" :multi="true" :pass-date="true" :start-date="search.startDate"
			:end-date="search.endDate" :autoChoose="true" :range="13" @change="changeCalendar">
		</beauty-calendar>
		<!-- 展示日历结束 -->
	</view>
</template>

<script>
import navbarList from "@/components/uni-z/navbar-list.vue";
import beautyCalendar from "@/components/beauty-calendar/beauty-calendar.vue";

var firstLoad = true;
export default {
	components: { navbarList, beautyCalendar },
	data() {
		return {
			search: {
				type: "all",
				startDate: "",
				endDate: "",
			},
			listUrl: undefined,
		};
	},
	onLoad(e) {
		
		this.$users.checkLogin();
		this.refreshData();
	},
	onShow(e) {
		let _this = this;
		_this.handleSugoioLoad('顾客档案', 'guest-list')
		this.refreshData(true)	
	},
	methods: {
		handleNav(id) {
			this.$common.to("/pages/skin/guest-record?id=" + id);
		},
		refreshData(refresh) {
			this.listUrl = "/peopleData/list?assistantShop=" + this.$users.ID + "&startDate=" + this.search.startDate  + "&endDate=" + this.search.endDate;
			//这里可以在url添加搜索日期的参数
			if (refresh && this.$refs.navbar) this.$refs.navbar.refresh();
		},
		switchType(type) {
			this.search.type = type;
			if (type == "date") {
				this.$refs.calendar.open();
			} else {
				this.search.startDate = "";
				this.search.endDate = "";
				this.refreshData(true);
			}
		},
		changeCalendar(choiceDate) {
			if (choiceDate) {
				this.search.startDate = this.$common.replaceAll(choiceDate[0],"-","/");
				this.search.endDate =  this.$common.replaceAll(choiceDate[choiceDate.length-1],"-","/");
				// this.search.startDate = choiceDate[0];
				// this.search.endDate = choiceDate[1];
			} else {
				this.search.startDate = "";
				this.search.endDate = "";
			}
			this.refreshData(true);
		},
	},
};
</script>

<style lang="scss">
.search {
	position: relative;
	z-index: 1;
	padding: 20upx 30upx;
	background: linear-gradient(90deg, #ff6590 0%, #ff6a6a 100%);
	.border {
		background: rgba(249, 249, 249, 0.2);
		border: 1px solid rgba(249, 249, 249, 0);
		color: #ffffff;
		border-radius: 100px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		padding: 0px 40upx;
	}
	.select-a {
		border: 1px solid #ffffff;
	}
}
</style>
